<template>
  <div class="enroll_maid">
    <div  class="enroll_home">
      <router-link to="/maid" class="enroll_home_button   jq_click" ><i class="iconfont icon-shouye enroll_home_img"></i></router-link>
    </div>
    <!--    登录注册切换-->
    <div class="enroll_find_option">
      <div class="enroll_option_text">登录</div>
      <div class="enroll_switch"></div>
    </div>
<!--    嘴巴-->
    <div class="enroll_menu">
      <!--    眼睛-->
      <div class="enroll_left enroll_eye"></div>
      <div class="enroll_right enroll_eye"></div>
    </div>
    <!--    闭眼特效-->
    <div class="enroll_Shut_down_div">
      <div class="enroll_left_Shut_down"></div>
      <div class="enroll_right_Shut_down"></div>
    </div>
    <!--用户登录-->
    <div class="enroll_poeple_text">
      <input  type="text" class="enroll_username" placeholder=" 请输入账号/手机号" name="username">
      <input  type="password" class="enroll_password" placeholder="请输入密码" name="password">
      <input  type="password" class="enroll_password" placeholder="请确认密码" name="password">
      <input  type="text" class="captcha" placeholder="验证码" name="captcha">
      <img src="../assets/ciyuan_image/微信图片_20221128110914.jpg"  alt="微信" class="captcha_img"/>

    </div>
    <!--  提交-->
    <div class="enroll_submit_bottom_div">
      <button class="enroll_submit_button">确定</button>
    </div>
  </div>

</template>


<script>
import $ from 'jquery'
// import HHead from "@/components/HHead";
export default {
  name:'enroll_pages',
  components:{
    // HHead
  }
}
$(function (){
  //登录/注册切换
  $(".enroll_switch").on("click", function () {
      $('.enroll_option_text').text("注册").css({
        transform: "translate(83px,0px)",
        transition: "1s",
      });
      $('.enroll_switch').css({
        transform: "translate(-58px,0px)",
        transition: "1s",
      });
      $(".enroll_find_option").css({
        backgroundColor: " red",
        boxShadow: "0px 0px 6px rgba(145, 233, 14, 0.443)",
      });
      location.href='http://localhost:8080/login'
  })

  //焦点密码闭眼
  $('.enroll_password').on('input',function (){
    if(!($('.enroll_password').val()==='')){
      $('.enroll_left_Shut_down').css({
        opacity: 1
      })
      $('.enroll_right_Shut_down').css({
        opacity: 1
      })
    }else{
      $('.enroll_left_Shut_down').css({
        opacity: 0
      })
      $('.enroll_right_Shut_down').css({
        opacity: 0
      })
    }
  })
  $('.enroll_password').on('focus',function (){
    $('.enroll_left_Shut_down').css({
      opacity: 1
    })
    $('.enroll_right_Shut_down').css({
      opacity: 1
    })
  })
  $('.enroll_password').on('blur',function (){
    $('.enroll_left_Shut_down').css({
      opacity: 0
    })
    $('.enroll_right_Shut_down').css({
      opacity: 0
    })
  })
  //触碰眼睛闭眼
  $('.enroll_left_Shut_down').on('mouseover',function (){
    $('.enroll_left_Shut_down').css({
      opacity: 1
    })
  })
  $('.enroll_left_Shut_down').on('mouseout',function (){
    $('.enroll_left_Shut_down').css({
      opacity: 0
    })
  })
  $('.enroll_right_Shut_down').on('mouseover',function (){
    $('.enroll_right_Shut_down').css({
      opacity: 1
    })
  })
  $('.enroll_right_Shut_down').on('mouseout',function (){
    $('.enroll_right_Shut_down').css({
      opacity: 0
    })
  })
})
//眼睛动
document.querySelector('body').addEventListener('mousemove',eyeball);
function eyeball(){
  var eye = document.querySelectorAll('.enroll_eye');
  eye.forEach(function (eye){
    let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
    let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
    let radian = Math.atan2(event.pageX - x,event.pageY - y);
    let rotation = (radian * (180 / Math.PI) * -1)+270;
    eye.style.transform = "rotate("+rotation+"deg)"
  })
}
</script>